<template>
  <div class="">
    <mu-sub-header>产品服务 / Redis / 实例列表 </mu-sub-header>

    <div class="wrapper-md">
      <mu-card>
        <mu-card-header title="搜索条件"/>
        <mu-card-text>
          <form>
            <mu-row gutter>
              <mu-col width="50" tablet="20" desktop="25">
                <mu-text-field hintText="名称" v-model="value"/>
              </mu-col>

              <mu-col width="50" tablet="30" desktop="25">
                <mu-select-field v-model="game2" multiple label="">
                  <mu-menu-item value="1" title="阴阳师"/>
                  <mu-menu-item value="2" title="影之刃"/>
                  <mu-menu-item value="3" title="天下HD"/>
                  <mu-menu-item value="4" title="穿越火线"/>
                  <mu-menu-item value="5" title="英雄联盟"/>
                  <mu-menu-item value="6" title="王者荣耀"/>
                </mu-select-field>
              </mu-col>

              <mu-col width="50" tablet="30" desktop="25">
                <mu-date-picker mode="landscape" hintText="选择日期"/>
              </mu-col>

              <mu-col width="50" tablet="20" desktop="25" style="text-align: center;">
                <mu-raised-button label="提交" class="demo-raised-button" primary/>
              </mu-col>
            </mu-row>

          </form>
        </mu-card-text>
      </mu-card>

      <mu-card>
        <mu-card-header title="实例列表"/>
        <mu-card-text>
          <div class="btn-group">
            <mu-raised-button label="刷新" class="demo-raised-button btn-sm" icon="refresh"/>
            <mu-raised-button label="新建" class="demo-raised-button btn-sm" primary icon="add" />
            <mu-raised-button label="编辑" class="demo-raised-button btn-sm" icon="edit" backgroundColor="#a4c639"/>
            <mu-raised-button label="删除" class="demo-raised-button btn-sm" secondary icon="delete" />
          </div>

          <div class="table-responsible">
            <mu-table :fixedFooter="fixedFooter" :fixedHeader="fixedHeader" :height="height"
                      :enableSelectAll="enableSelectAll" :multiSelectable="multiSelectable"
                      :selectable="selectable" :showCheckbox="showCheckbox">
              <mu-thead slot="header">
                <mu-tr>
                  <mu-th tooltip="ID">ID</mu-th>
                  <mu-th tooltip="名称">Name</mu-th>
                  <mu-th tooltip="状态">Status</mu-th>
                  <mu-th tooltip="操作" style="text-align: center">操作</mu-th>
                </mu-tr>
              </mu-thead>
              <mu-tbody>
                <mu-tr v-for="item,index in tableData" :selected="item.selected">
                  <mu-td>{{index + 1}}</mu-td>
                  <mu-td>{{item.name}}</mu-td>
                  <mu-td>{{item.status}}</mu-td>
                  <mu-td>
                    <mu-flat-button label="编辑" @click="edit(item)" class="demo-flat-button btn-sm" icon="edit"/>
                    <mu-flat-button label="删除" @click="delete(item)" class="demo-flat-button btn-sm" icon="delete" secondary/>
                  </mu-td>
                </mu-tr>
              </mu-tbody>
              <!--<mu-tfoot slot="footer">
                <mu-tr>
                  <mu-td>ID</mu-td>
                  <mu-td>Name</mu-td>
                  <mu-td>Status</mu-td>
                </mu-tr>
              </mu-tfoot>-->
            </mu-table>

          </div>

          <div class="paginations clearfloat">
            <div class="fr">
              <mu-pagination :total="total" :defaultCurrent="defaultCurrent" :showSizeChanger="showSizeChanger" :pageSizeOption="pageSizeOption" @pageSizeChange="handleClick">
              </mu-pagination>
            </div>
          </div>

        </mu-card-text>
      </mu-card>

    </div>

    <div>
      <mu-paper class="demo-paper" :zDepth="1" />
      <mu-paper class="demo-paper" :zDepth="2" />
      <mu-paper class="demo-paper" :zDepth="3" />
      <mu-paper class="demo-paper" :zDepth="4" />
      <mu-paper class="demo-paper" :zDepth="5" />
    </div>

  </div>
</template>
<style>

  .wrapper-md{
    padding: 18px;
  }

  .demo-paper {
    display: inline-block;
    height: 100px;
    width: 100px;
    margin: 20px;
    text-align: center;
  }

  .table-responsible{
    margin:15px 0;
  }

</style>
<script>

  export default{
    data(){
      return{
        game2: ['1'],
        value:'',
        total: 500,
        current: 1,
        defaultCurrent:true,
        showSizeChanger: true,
        pageSizeOption: ['15', '20', '25', '30'],
        tableData: [
          {
            name: 'John Smith',
            status: 'Employed',
            selected: true
          },
          {
            name: 'Randal White',
            status: 'Unemployed'
          },
          {
            name: 'Stephanie Sanders',
            status: 'Employed',
            selected: true
          },
          {
            name: 'Steve Brown',
            status: 'Employed'
          },
          {
            name: 'Joyce Whitten',
            status: 'Employed'
          },
          {
            name: 'Samuel Roberts',
            status: 'Employed'
          },
          {
            name: 'Adam Moore',
            status: 'Employed'
          }
        ],
        fixedHeader: true,
        fixedFooter: true,
        selectable: true,
        multiSelectable: true,
        enableSelectAll: true,
        showCheckbox: true,
        height: 'auto'
      }
    },
    methods: {
      handleClick (newIndex) {

      },
      edit (row) {
        console.log(row.name);
      },
      delete (row) {
        console.log(row.name);
      }
    },
    components:{

    }
  }
</script>
